<template>
  <div class="order">
    <div class="o_address">
      <div
        :class="{ oa_kd: true, kdActive: type == 'kd' }"
        @click="setType('kd')"
      ></div>
      <div
        :class="{ oa_zt: true, ztActive: type == 'zt' }"
        @click="setType('zt')"
      ></div>
    </div>
    <div class="o_address_detail" v-if="defaultDelivery || defaultBySelf">
      <div class="o_info">
        <h3>
          <span>
            {{ type == "kd" ? defaultDelivery.realName : defaultBySelf.name }}
          </span>
          <span>
            {{ type == "kd" ? defaultDelivery.phone : defaultBySelf.phone }}
          </span>
        </h3>
        <p>
          <span v-show="type == 'kd'">[默认]</span>
          <span>{{
            type == "kd"
              ? defaultDelivery.province +
                defaultDelivery.city +
                defaultDelivery.district +
                defaultDelivery.detail
              : defaultBySelf.address + defaultBySelf.detailedAddress
          }}</span>
        </p>
      </div>
      <div class="o_arrow">&gt;</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Vue2FxhPreOrder",
  data() {
    return {
      preOrderNo: "", // 预下单订单号，不是最终的订单号。
      defaultDelivery: null, // 默认快递配送地址
      deliveryLists: [], // 快递配送列表
      defaultBySelf: null, // 默认到店自提地址
      bySelfLists: [], // 到店自提地址列表
      type: "kd", // 配送方式
    };
  },
  created() {
    this.preOrderNo = this.$route.query.preOrderNo;
    this.getDeliveryAddresses();
  },
  methods: {
    // 获取快递配送地址
    getDeliveryAddresses() {
      this.$axios
        .get(
          "https://apif.java.crmeb.net/api/front/address/list?page=1&limit=5"
        )
        .then(({ data }) => {
          this.deliveryLists = data.data.list;
          this.defaultDelivery = data.data.list.filter(
            address => address.isDefault
          )[0];
        });
    },
    // 获取到店自提地址
    getBySelfAddresses() {
      this.$axios
        .post("https://apif.java.crmeb.net/api/front/store/list")
        .then(({ data }) => {
          this.bySelfLists = data.data.list;
          this.defaultBySelf = data.data.list[0];
        });
    },
    setType(type) {
      this.type = type;
      if (type == "kd") {
        this.getDeliveryAddresses();
        this.defaultBySelf = null;
      } else if (type == "zt") {
        this.getBySelfAddresses();
        this.defaultDelivery = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.order {
  height: calc(100vh - 131px);
  padding: 10px;
  box-sizing: border-box;
  background-image: linear-gradient(#ff4992 0%, #f5f5f5 15%);
  > .o_address {
    display: flex;
    position: relative;
    > div.kdActive::after {
      width: 170px;
      border-width: 0px 10px 50px 0;
      border-color: transparent transparent #fff;
      border-style: none solid solid none;
      z-index: 100;
      top: -8px;
      line-height: 50px;
      color: blue;
      border-top-left-radius: 5px;
      border-top-right-radius: 20px;
    }
    > div.ztActive::after {
      border-width: 0px 0px 50px 10px;
      border-color: transparent transparent #fff;
      border-style: none none solid solid;
      z-index: 100;
      top: -8px;
      line-height: 50px;
      color: blue;
      width: 170px;
      left: 175px;
      border-top-left-radius: 20px;
      border-top-right-radius: 5px;
    }
    > div::after {
      width: calc((100vw - 60px) / 2);
      position: absolute;
      top: 0;
      left: 0;
      text-align: center;
      height: 0;
      border-width: 21px 20px;
      border-color: #999;
      border-style: solid;
      line-height: 2px;
    }
    > .oa_kd::after {
      content: "快递配送";
    }
    > .oa_zt::after {
      content: "到店自提";
      left: 160px;
    }
  }
  .o_address_detail {
    background-color: #fff;
    margin-top: 40px;
    padding: 20px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    > .o_info {
      > h3 {
        font-size: 16px;
        height: 30px;
        line-height: 30px;
        > span:first-child {
          margin-right: 30px;
        }
      }
      > p {
        display: flex;
        font-size: 12px;
        > span:first-child {
          margin-right: 10px;
        }
        > span:last-child {
          width: 250px;
        }
      }
    }
  }
}
</style>
